<template>
    <div class="orderly-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧数据区 -->
            <div class="left-section">
                <!-- 城市整洁度仪表盘 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🎯</span>
                        城市整洁度
                    </div>
                    <div class="cleanliness-gauge" ref="cleanlinessGauge"></div>
                </div>
                
                <!-- 管理效能指标 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📈</span>
                        管理效能指标
                    </div>
                    <div class="efficiency-metrics">
                        <div class="metric-item" v-for="(item, index) in efficiencyMetrics" :key="index">
                            <div class="metric-header">
                                <div class="metric-icon">{{ item.icon }}</div>
                                <div class="metric-name">{{ item.name }}</div>
                            </div>
                            <div class="metric-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" :style="{ width: item.value + '%' }"></div>
                                </div>
                                <div class="progress-value">{{ item.value }}%</div>
                            </div>
                            <div class="metric-trend" :class="item.trend">
                                {{ item.change }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间展示区 -->
            <div class="center-section">
                <!-- 城市秩序监控中心 -->
                <div class="order-monitor-center">
                    <div class="monitor-header">
                        <span class="icon">🏛️</span>
                        城市秩序监控中心
                    </div>
                    <div class="monitor-dashboard">
                        <div class="dashboard-item" v-for="(item, index) in monitorDashboard" :key="index" :class="item.status">
                            <div class="item-header">
                                <div class="item-icon">{{ item.icon }}</div>
                                <div class="item-title">{{ item.title }}</div>
                                <div class="item-status">{{ item.statusText }}</div>
                            </div>
                            <div class="item-data">
                                <div class="data-row">
                                    <span class="data-label">覆盖率:</span>
                                    <span class="data-value">{{ item.coverage }}</span>
                                </div>
                                <div class="data-row">
                                    <span class="data-label">响应时间:</span>
                                    <span class="data-value">{{ item.responseTime }}</span>
                                </div>
                                <div class="data-row">
                                    <span class="data-label">满意度:</span>
                                    <span class="data-value">{{ item.satisfaction }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时秩序动态 -->
                <div class="order-dynamics">
                    <div class="dynamics-title">实时秩序动态</div>
                    <div class="dynamics-list">
                        <div class="dynamic-item" v-for="(item, index) in orderDynamics" :key="index">
                            <div class="dynamic-time">{{ item.time }}</div>
                            <div class="dynamic-content">
                                <div class="dynamic-area">{{ item.area }}</div>
                                <div class="dynamic-action">{{ item.action }}</div>
                                <div class="dynamic-result" :class="item.result">{{ item.resultText }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧数据区 -->
            <div class="right-section">
                <!-- 区域整洁度排行 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏆</span>
                        区域整洁度排行
                    </div>
                    <div class="ranking-chart" ref="rankingChart"></div>
                </div>
                
                <!-- 城市管理分类统计 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📊</span>
                        管理分类统计
                    </div>
                    <div class="category-chart" ref="categoryChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 管理效能指标
const efficiencyMetrics = ref([
    { icon: '🧹', name: '道路清洁', value: 96, change: '+2.1%', trend: 'up' },
    { icon: '🗑️', name: '垃圾处理', value: 94, change: '+1.8%', trend: 'up' },
    { icon: '🚗', name: '交通秩序', value: 92, change: '+1.5%', trend: 'up' },
    { icon: '🏪', name: '市容管理', value: 95, change: '+2.3%', trend: 'up' }
])

// 监控中心数据
const monitorDashboard = ref([
    { 
        icon: '🚨', 
        title: '应急响应', 
        status: 'excellent', 
        statusText: '优秀', 
        coverage: '100%', 
        responseTime: '2.5分钟', 
        satisfaction: '98.5%' 
    },
    { 
        icon: '👮', 
        title: '秩序维护', 
        status: 'excellent', 
        statusText: '优秀', 
        coverage: '98.2%', 
        responseTime: '3.1分钟', 
        satisfaction: '96.8%' 
    },
    { 
        icon: '🌳', 
        title: '环境维护', 
        status: 'good', 
        statusText: '良好', 
        coverage: '95.7%', 
        responseTime: '4.2分钟', 
        satisfaction: '94.2%' 
    },
    { 
        icon: '🏢', 
        title: '设施管理', 
        status: 'excellent', 
        statusText: '优秀', 
        coverage: '97.8%', 
        responseTime: '2.8分钟', 
        satisfaction: '97.1%' 
    }
])

// 实时秩序动态
const orderDynamics = ref([
    { time: '14:32', area: '天河区', action: '道路清洁', result: 'completed', resultText: '已完成' },
    { time: '14:28', area: '越秀区', action: '垃圾清运', result: 'completed', resultText: '已完成' },
    { time: '14:25', area: '海珠区', action: '秩序维护', result: 'processing', resultText: '进行中' },
    { time: '14:22', area: '荔湾区', action: '设施检查', result: 'completed', resultText: '已完成' },
    { time: '14:19', area: '白云区', action: '环境整治', result: 'processing', resultText: '进行中' },
    { time: '14:16', area: '黄埔区', action: '交通疏导', result: 'completed', resultText: '已完成' }
])

// 图表实例
const cleanlinessGauge = ref<HTMLElement | null>(null)
const rankingChart = ref<HTMLElement | null>(null)
const categoryChart = ref<HTMLElement | null>(null)

const cleanlinessGaugeInstance = ref<echarts.ECharts | null>(null)
const rankingChartInstance = ref<echarts.ECharts | null>(null)
const categoryChartInstance = ref<echarts.ECharts | null>(null)

// 初始化图表
onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            initCharts();
        }, 100);
    });
})

const initCharts = () => {
    // 城市整洁度仪表盘
    if (cleanlinessGauge.value) {
        const chart = echarts.init(cleanlinessGauge.value)
        cleanlinessGaugeInstance.value = chart;
        chart.setOption({
            series: [
                {
                    name: '整洁度',
                    type: 'gauge',
                    progress: {
                        show: true,
                        width: 18
                    },
                    axisLine: {
                        lineStyle: {
                            width: 18
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        length: 15,
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 25,
                        color: '#999',
                        fontSize: 12
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 25,
                        itemStyle: {
                            borderWidth: 10
                        }
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 30,
                        offsetCenter: [0, '70%'],
                        formatter: '{value}',
                        color: '#fff'
                    },
                    data: [
                        {
                            value: 94.8,
                            name: '整洁度',
                            itemStyle: {
                                color: '#00d4ff'
                            }
                        }
                    ]
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 区域整洁度排行
    if (rankingChart.value) {
        const chart = echarts.init(rankingChart.value)
        rankingChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: { color: '#fff' },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['天河区', '越秀区', '海珠区', '荔湾区', '白云区', '黄埔区'],
                axisLabel: { color: '#fff' },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            series: [
                {
                    name: '整洁度',
                    type: 'bar',
                    data: [
                        {
                            value: 96.5,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#00d4ff' },
                                    { offset: 1, color: '#00a1ff' }
                                ])
                            }
                        },
                        {
                            value: 95.8,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#00ff88' },
                                    { offset: 1, color: '#00d47f' }
                                ])
                            }
                        },
                        {
                            value: 94.2,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#ff6b6b' },
                                    { offset: 1, color: '#ff3a3a' }
                                ])
                            }
                        },
                        {
                            value: 93.7,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#ffd700' },
                                    { offset: 1, color: '#ffaa00' }
                                ])
                            }
                        },
                        {
                            value: 92.9,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#9370db' },
                                    { offset: 1, color: '#7b3dd1' }
                                ])
                            }
                        },
                        {
                            value: 91.5,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#ff9a00' },
                                    { offset: 1, color: '#ff7a00' }
                                ])
                            }
                        }
                    ],
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff'
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 管理分类统计
    if (categoryChart.value) {
        const chart = echarts.init(categoryChart.value)
        categoryChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: { color: '#fff' }
            },
            series: [
                {
                    name: '管理分类',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['60%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 35, name: '环境卫生', itemStyle: { color: '#00a1ff' } },
                        { value: 25, name: '市容管理', itemStyle: { color: '#00ff88' } },
                        { value: 20, name: '交通秩序', itemStyle: { color: '#ff6b6b' } },
                        { value: 15, name: '设施维护', itemStyle: { color: '#ffd700' } },
                        { value: 5, name: '其他管理', itemStyle: { color: '#9370db' } }
                    ]
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }
}
</script>

<style scoped lang="scss">
.orderly-container {
    background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #2d3748 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;

    .main-content {
        flex: 1;
        display: flex;
        gap: 20px;

        .left-section, .right-section {
            width: 30%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                flex: 1;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 20px;
                    color: #00d4ff;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 600;

                    .icon {
                        font-size: 24px;
                    }
                }

                .cleanliness-gauge {
                    height: calc(100% - 60px);
                }

                .efficiency-metrics {
                    .metric-item {
                        margin-bottom: 20px;
                        padding: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;

                        .metric-header {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 10px;

                            .metric-icon {
                                font-size: 20px;
                            }

                            .metric-name {
                                font-size: 14px;
                                font-weight: 600;
                            }
                        }

                        .metric-progress {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 8px;

                            .progress-bar {
                                flex: 1;
                                height: 8px;
                                background: rgba(255, 255, 255, 0.1);
                                border-radius: 4px;
                                overflow: hidden;

                                .progress-fill {
                                    height: 100%;
                                    background: linear-gradient(90deg, #00d4ff, #00a1ff);
                                    border-radius: 4px;
                                    transition: width 0.3s ease;
                                }
                            }

                            .progress-value {
                                font-size: 12px;
                                color: #00d4ff;
                                font-weight: bold;
                                min-width: 40px;
                            }
                        }

                        .metric-trend {
                            font-size: 12px;
                            padding: 2px 8px;
                            border-radius: 4px;

                            &.up {
                                color: #00ff88;
                                background: rgba(0, 255, 136, 0.1);
                            }

                            &.down {
                                color: #ff6b6b;
                                background: rgba(255, 107, 107, 0.1);
                            }
                        }
                    }
                }

                .ranking-chart,
                .category-chart {
                    height: calc(100% - 60px);
                }
            }
        }

        .center-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .order-monitor-center {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                .monitor-header {
                    font-size: 20px;
                    font-weight: 600;
                    color: #00d4ff;
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .icon {
                        font-size: 28px;
                    }
                }

                .monitor-dashboard {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 15px;

                    .dashboard-item {
                        padding: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;
                        border: 2px solid transparent;
                        transition: all 0.3s ease;

                        &:hover {
                            transform: translateY(-5px);
                            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                        }

                        &.excellent {
                            border-color: #00ff88;
                            background: rgba(0, 255, 136, 0.05);
                        }

                        &.good {
                            border-color: #00d4ff;
                            background: rgba(0, 212, 255, 0.05);
                        }

                        .item-header {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 15px;

                            .item-icon {
                                font-size: 24px;
                            }

                            .item-title {
                                font-size: 16px;
                                font-weight: 600;
                                flex: 1;
                            }

                            .item-status {
                                font-size: 12px;
                                padding: 4px 8px;
                                border-radius: 4px;
                                background: rgba(0, 255, 136, 0.1);
                                color: #00ff88;
                            }
                        }

                        .item-data {
                            .data-row {
                                display: flex;
                                justify-content: space-between;
                                margin-bottom: 8px;

                                .data-label {
                                    font-size: 12px;
                                    color: #a0a0a0;
                                }

                                .data-value {
                                    font-size: 12px;
                                    color: #00d4ff;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }

            .order-dynamics {
                flex: 1;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                .dynamics-title {
                    font-size: 18px;
                    font-weight: 600;
                    color: #00d4ff;
                    margin-bottom: 20px;
                    text-align: center;
                }

                .dynamics-list {
                    height: calc(100% - 60px);
                    overflow-y: auto;

                    &::-webkit-scrollbar {
                        width: 4px;
                    }
                    
                    &::-webkit-scrollbar-track {
                        background: rgba(255, 255, 255, 0.05);
                    }
                    
                    &::-webkit-scrollbar-thumb {
                        background: rgba(0, 212, 255, 0.5);
                        border-radius: 2px;
                    }

                    .dynamic-item {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        padding: 12px;
                        margin-bottom: 10px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 8px;
                        transition: all 0.3s ease;

                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                        }

                        .dynamic-time {
                            font-size: 12px;
                            color: #00d4ff;
                            font-weight: bold;
                            min-width: 50px;
                        }

                        .dynamic-content {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            gap: 15px;

                            .dynamic-area {
                                font-size: 14px;
                                font-weight: 600;
                                min-width: 60px;
                            }

                            .dynamic-action {
                                font-size: 14px;
                                color: #a0a0a0;
                                flex: 1;
                            }

                            .dynamic-result {
                                font-size: 12px;
                                padding: 4px 8px;
                                border-radius: 4px;

                                &.completed {
                                    color: #00ff88;
                                    background: rgba(0, 255, 136, 0.1);
                                }

                                &.processing {
                                    color: #ffd700;
                                    background: rgba(255, 215, 0, 0.1);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.dashboard-item.excellent {
    animation: pulse 2s infinite;
}
</style>